<template>
  <div>

      <!-- /.u-menu -->
      <div class="u-main">
        <div class="u-tab-wrap">
          <ul class="u-tab clearfix">
            <li class="current"><a>我的积分</a></li></ul>
        </div>
        <div id="tab-box">
          <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;">
            <div style="margin-bottom: 20px;">
              <el-table
                :data="scores"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="scoreId"
                  label="编号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="scoreStatus"
                  label="积分增加\减少"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="scoreTime"
                  :formatter="dateFormat"
                  label="变化时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="scoreContext"
                  label="变化详情">
                </el-table-column>
                <el-table-column
                  prop="scoreBalance"
                  label="总积分剩余">
                </el-table-column>
                <el-table-column
                  prop="scoreUname"
                  label="用户名">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button  @click="handleClick(scope.row)" type="primary" style="margin-left: 16px;">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
                <p style="font-size: 24px">用户名：{{user.userAccount}}</p>
                <p style="font-size: 24px">手机号：{{user.userPhone}}</p>
                <p style="font-size: 24px">昵称：{{user.userNickname}}</p>
                <p style="font-size: 24px">性别：{{user.userSex}}</p>
                <p style="font-size: 24px">邮箱：{{user.userEmail}}</p>
                <p style="font-size: 24px">注册时间：{{$moment(user.userRegistertime).format('YYYY-MM-DD')}}</p>
                <p style="font-size: 24px">账户余额：{{user.userAmount}}</p>
                <p style="font-size: 24px">邀请码：{{user.userCode}}</p>
                <p style="font-size: 24px">积分：{{score.scoreAmount}}</p>
                <p style="font-size: 24px">增加/减少：{{score.scoreStatus}}</p>
                <p style="font-size: 24px">变化时间：{{$moment(score.scoreTime).format('YYYY-MM-DD')}}</p>
                <p style="font-size: 24px">变化详情：{{score.scoreContext}}</p>
                <p style="font-size: 24px">总积分剩余：{{score.scoreBalance}}</p>
              </el-drawer>
              <!--分页-->
              <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
                </el-pagination>
              </div>
            </div>
          </div>
            <div class="page-wrap">
            </div>
          </div>
        </div>
  </div>
</template>

<script>
    export default {
      name: "",
      data(){
          return{
            scores:[],
            /*分页数据*/
            currentPage:1,
            pageSizes:[1,2,3,4],
            pageSize:4,
            totalCount:1,
            /*侧拉框*/
            drawer: false,

            score:{},
            user:{}
          }
      },
      methods:{
        /*侧拉框*/
        handleClick:function(row){
          this.drawer=true
          /*查询积分和用户信息*/
          this.axios.post("/api/score/findscorebyid",{scoreId:row.scoreId}).then((data)=>{
            this.score=data.data.userScore
            this.user=data.data.user
          })
        },
        // 每页显示的条数
        handleSizeChange(val) {
          this.pageSize=val
          this.currentPage=1
          this.handleCurrentChange(1)  //刷新表格
        },
        // 显示第几页
        handleCurrentChange(val) {
          this.currentPage=val
          /*发送请求通过currentpage获取页面数据*/
          this.axios.post("/api/score/findsinglescorepage",{pageNum:this.currentPage,pageSize:this.pageSize}).then((data)=>{
            this.scores=data.data.list
            this.totalCount=data.data.total
          })
        },
        /*element时间格式化*/
        dateFormat:function(row,column){
          var date = row[column.property];
          if (date == undefined) {
            return "";
          }
          var moment = require("moment");
          return moment(date).format("YYYY-MM-DD");
        }
      },
      /*初始化表格数据*/
      created() {
        this.axios.post("/api/score/findallscore").then((data)=>{
          this.scores=data.data.list
          this.totalCount=data.data.total
        })
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
